<template>
    <!-- 最大div-->
    <div class="Outermost-layer">
        <!--定位加天气 以及时间-->
        <div class="orientation-div">
            <img src="./image/group260.png" class="orientation">
            <p>{{ city }}</p>
            <img src="./image/weather.png" class="weather">
            <p class="weather-p">{{ weather }}°C</p>
        </div>
        <div class="current-div">
            <p id="current-date" class="current-p">{{ Currentdatehm }}</p>
            <p id="current-time" class="current-p1">{{ Currentdate }}</p>
            <p id="current-week" class="current-p2">{{ week }}</p>
        </div>
        <!--左侧div-->
        <div class="left">
            <!--左侧上层div-->
            <div class="left-up">
                <!--左侧上层div-->
                <img src="./image/Layer3.png" class="left-img">
                <div class="text-container">
                    <p class="site">站点数量</p>
                    <h2><span class="number-sites">{{ numberSites }}</span></h2>
                    <h4><span class="unit">个</span></h4>
                    <p class="equipment">设备数量</p>
                    <h3><span class="number-sites">{{ numberTotalDeviceCount }}</span></h3>
                    <h5><span class="unit">个</span></h5>
                </div>
                <div class="left-up-up" id="main">
                    <!-- //这里导入了曲线图-->
                </div>
                <img src="./image/Layer4.png" class="right-img">
                <div class="text-container1">
                    <p class="site1">在线设备</p>
                    <h2><span class="number-sites">{{ numberOnline }}</span></h2>
                    <h4><span class="unit">个</span></h4>
                    <p class="equipment1">离线设备</p>
                    <h3><span class="number-sites">{{ numberOffline }}</span></h3>
                    <h5><span class="unit">个</span></h5>
                </div>
                <!--左侧下层左边div-->
                <div class="left-under-left">
                    <div class="report">
                        <img src="./image/rubikcube.png">
                        <p>上报事件</p>
                        <h2>{{ TotalNumberEvents }}</h2>
                        <h3>件</h3>
                    </div>
                </div>
                <!--左侧下层右边div-->
                <div class="left-under-right">
                    <div class="report1">
                        <img src="./image/file.png">
                        <p>待办事件</p>
                        <h2>{{ agencyNumber }}</h2>
                        <h3>件</h3>
                    </div>
                </div>
            </div>
            <!--左侧下层div-->
            <div class="containerleft">
                <div class="title">
                    <img src="./image/rankingconsumption.png">
                </div>
                <div class="event-list">
                    <ul class="event-item">
                        <li class="event-item-ul">时间</li>
                        <li class="event-item-ul">内容</li>
                        <li class="event-item-ul">用户</li>
                    </ul>
                    <div class="event-item-div">
                        <ul v-for="log in stemlog" :key="log.id" class="event-item">
                            <li class="event-item-li">{{ log.createTime }}</li>
                            <li class="event-item-li">{{ log.title }}</li>
                            <li class="event-item-li">{{ log.username }}</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <!--中间div-->
        <img src="./image/group262.png" class="dotu">
        <img src="./image/xiuzhou.png" class="xiuzhou" @click="Skipmap">
        <img src="./image/jingkai.png" class="jingkai" @click="Skipmap">
        <img src="./image/jiashan.png" class="jiashan" @click="Skipmap">
        <img src="./image/nanhu.png" class="nanhu" @click="Skipmap">
        <img src="./image/pinghu.png" class="pinghu" @click="Skipmap">
        <img src="./image/tongxiang.png" class="tongxiang" @click="Skipmap">
        <img src="./image/haining.png" class="haining" @click="Skipmap">
        <img src="./image/haiyan.png" class="haiyan" @click="Skipmap">
        <div class="mapText">
            <p class="xiuzhou-p">秀洲区</p>
            <p class="xiuzhou-p-site">({{ xzq }}个站点)</p>

            <p class="jingkai-p">经开区</p>
            <p class="jingkai-p-site">({{ 0 }}个站点)</p>

            <p class="jiashan-p">嘉善县</p>
            <p class="jiashan-p-site">({{ jsx }}个站点)</p>

            <p class="nanhu-p">南湖区</p>
            <p class="nanhu-p-site">({{ nhq }}个站点)</p>

            <p class="pinghu-p">平湖市</p>
            <p class="pinghu-p-site">({{ phx }}个站点)</p>

            <p class="tongxiang-p">桐乡市</p>
            <p class="tongxiang-p-site">({{ txx }}个站点)</p>

            <p class="haining-p">海宁市</p>
            <p class="haining-p-site">({{ hnx }}个站点)</p>

            <p class="haiyan-p">海盐县</p>
            <p class="haiyan-p-site">({{ hyx }}个站点)</p>
        </div>
        <div class="middle">

        </div>
        <!--右侧div-->
        <div class="right">
            <!--右上div-->
            <div class="right-up">
                <img src="./image/leveltitle.png">
                <div class="right-up-chart" id="chart">

                </div>
            </div>
            <!--右下div-->
            <div class="right-under">
                <div class="title1">
                    <img src="./image/alarmlog.png">
                </div>
                <div class="event-ul">
                    <ul class="header">
                        <li>事件名称</li>
                        <li>时间</li>
                        <li>站点名称</li>
                        <li>事件详情</li>
                    </ul>
                    <div class="eventlist-div">
                        <ul v-for="event in EventList" :key="event.omId"
                            class="event"
                            @click="selectEvent(event.omId)"
                            :class="{ 'selected': event.omId === selectedDeviceId }"
                        >
                            <img v-if="event.omId === selectedDeviceId" src="./image/group261.png" class="click-image">
                            <li v-if="event.eventName == 0">运维上报</li>
                            <li v-else>事件上报</li>
                            <li>{{ event.reportingTime }}</li>
                            <li>{{ event.siteName }}</li>
                            <li>{{ event.detail }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {deviceNumberLevel, eventList, Getweathermap, levelRanking, Systemlog} from "../../api/largescreen";

export default {
    data() {
        return {
            numberSites: '', //站点数
            numberOnline: '', //在线设备数
            numberOffline: '',//离线设备数
            numberTotalDeviceCount: '',//总数
            TotalNumberEvents: '', //上报事件总数
            agencyNumber: '',//代办事件数
            EventList: [], //事件列表
            LevelRankingList: [],//排名列表
            selectedDeviceId: null,
            showImage: false, //秀洲图片
            Currentdatehm: '',  //当前时分
            Currentdate: '', //当前天
            week: '', //星期
            // 其他数据...
            chartData: [
                {value: 0, name: '离线设备'},
                {value: 0, name: '在线设备'}
            ],
            myChart: null,
            myChart1: null,
            weather: null,
            city: '',
            stemlog: [],
            xzq: 0,
            nhq: 0,
            hnx: 0,
            jsx: 0,
            txx: 0,
            phx: 0,
            hyx: 0,
        }
    },
    //其他方法区
    methods: {
        selectEvent(omId) {
            this.selectedDeviceId = omId;
        },
        Skipmap() {
            this.$router.push('./site/map');
        },
        //获取当时间
        getCurrentdate: function () {
            //获取当前时间
            var date = new Date();
            let number1 = date.getMonth() + 1;
            let number2 = (number1 < 10 ? '0' + number1 : number1);
            let number = date.getFullYear() + '-' + number2 + '-' + date.getDate(); //年月日
            // 获取当前时和分
            var hours = date.getHours();
            var minutes = date.getMinutes();
            //赋值
            this.Currentdate = number;
            this.Currentdatehm = hours + ':' + (minutes < 10 ? '0' + minutes : minutes);

            // 更新字段值
            document.getElementById('current-date').innerText = this.Currentdate;
            document.getElementById('current-time').innerText = this.Currentdatehm;
        },
        //获取数量
        HomeNumber() {
            deviceNumberLevel().then(re => {
                //赋值
                this.xzq = re.level.xzq;
                this.nhq = re.level.nhq;
                this.hnx = re.level.hnx;
                this.jsx = re.level.jsx;
                this.txx = re.level.txx;
                this.phx = re.level.phx;
                this.hyx = re.level.hyx;
                this.TotalNumberEvents = re.TotalNumberEvents; //总事件数
                this.agencyNumber = re.agencyNumber; //代办事件数
                this.numberOffline = re.numberOffline; //离线设备数
                this.numberOnline = re.numberOnline;//在线设备数
                this.numberSites = re.numberSites;//站点数
                this.numberTotalDeviceCount = re.numberTotalDeviceCount; //设备总数
                this.chartData = [
                    {value: re.numberOffline, name: '离线设备'},
                    {value: re.numberOnline, name: '在线设备'}
                ];
                let option = {
                    series: [
                        {data: this.chartData}
                    ]
                }
                option && this.myChart.setOption(option);
            }).catch(err => {
                console.log(err)
            })
        },
        //获取站点液位排行
        Stationlevelranking() {
            levelRanking().then(re => {
                //赋值
                let option1 = {
                    xAxis: [
                        {data: re.map(i => i.siteName)}
                    ],
                    series: [
                        {data: re.map(i => i.maxLiquidLevel)}
                    ]
                }
                option1 && this.myChart1.setOption(option1);
            }).catch(error => {
                console.log(error);
            })
        },
        //获取当地天气以及名称
        Getweather: function () {
            Getweathermap().then(re => {
                const response = typeof re === 'string' ? JSON.parse(re) : re; // 将返回的字符串解析为 JSON 对象
                this.weather = response.lives[0].temperature
                this.city = response.lives[0].city

                const date = new Date();
                const weekday = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                this.week = weekday[date.getDay()];
            }).catch(error => {
                console.log(error);
            })
        },
        //查询事件日志列表
        QueryingEventLogs() {
            eventList().then(re => {
                console.log(re)
                this.EventList = re
            }).catch(error => {
                console.log(error);
            })
        },
        //查询系统日志列表
        Systemlog() {
            Systemlog().then(re => {
                console.log(re);
                this.stemlog = re.lists
            }).catch(error => {
                console.log(error);
            })
        },
        //刷新页面
        relo() {
            if (window.location.href.indexOf("#reloaded") == -1) {
                window.location.href = window.location.href + "#reloaded";
                window.location.reload();
            }
        }
    },
    //初始化方法区
    mounted() {
        this.relo();
        //查询系统日志
        this.Systemlog();
        //初始化事件列表
        this.QueryingEventLogs();
        //初始化天气
        this.Getweather();
        //获取站点液位排行
        this.Stationlevelranking();
        //获取页面设备数量
        this.HomeNumber();
        // 每秒钟更新一次时间
        setInterval(this.getCurrentdate, 1000);
        //初始化 页面一加载就调用
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        this.myChart = myChart;
        var option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                show: false,
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this.chartData  // 使用chartData变量
                }
            ]
        };
        option && myChart.setOption(option);
        //初始化柱状图
        var chartDom1 = document.getElementById('chart');
        var myChart1 = echarts.init(chartDom1);
        var option1;
        this.myChart1 = myChart1;
        option1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color: '#FFFFFF',  // 设置x轴字体颜色为白色
                        formatter: function (value) {
                            // 自定义处理文本换行显示
                            if (value.length > 3) {
                                return value.slice(0, 3) + '\n' + value.slice(3);
                            }
                            return value;
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        color: '#FFFFFF',  // 设置y轴字体颜色为白色
                    },
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    itemStyle: {
                        color: '#2a76fa',  // 设置柱状图颜色
                        normal: {
                            label: {
                                show: true,  // 显示标签
                                position: 'top',  // 标签位置，可以根据需要调整
                                formatter: '{c}',  // 标签内容格式，这里显示数值
                                color: '#FFFFFF'  // 标签颜色
                            }
                        }
                    },
                    data: []
                }
            ]
        };

        option1 && myChart1.setOption(option1);
    }
}
</script>
<style scoped>
.Outermost-layer {
    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url("./image/backdrop.png");
    background-size: cover;
}

.left {
    flex: 1;
    padding: 10px;
}

.middle {
    position: relative; /* 添加相对定位 */
    flex: 2;
    padding: 10px;
}

.right {
    flex: 1;
    padding: 10px;
}

.left-up {
    padding: 10px;
    display: flex;
    align-items: center;
}

.left-up-up {
    width: 45%;
    height: 45vh;
    margin-left: 80px;
}

.left-img {
    margin-right: -140px;
}

.right-img {
    margin-left: -60px;
}

.left-under-left {
    position: absolute;
    margin-top: 300px;
    margin-left: -10px;
}

.left-under-left p {
    position: absolute;
    color: #FFFFFF;
    left: 30px;
    top: 35px;
    font-size: 20px;
}

.left-under-left h2 {
    position: absolute;
    color: #8fa9d2;
    left: 25px;
    top: 70px;
    font-size: 30px;
}

.left-under-left h3 {
    position: absolute;
    color: #5477b1;
    left: 110px;
    top: 80px;
    font-size: 15px;
}

.left-under-right {
    position: relative;
    margin-top: 100px;
    margin-left: -280px;
}

.report1 {
    position: absolute;
    width: 500px;
    height: 300px;
}

.report1 img {
    left: 300px;
    top: -272px;
}

.left-under-right img {
    position: absolute;
    margin-top: 300px;
    margin-left: -280px;

}

.left-under-right p {
    position: absolute;
    color: #FFFFFF;
    left: 40px;
    top: 55px;
    font-size: 20px;
}

.left-under-right h2 {
    position: absolute;
    color: #8fa9d2;
    margin-left: 35px;
    top: 95px;
    font-size: 30px;
}

.left-under-right h3 {
    position: absolute;
    color: #5477b1;
    margin-left: 130px;
    top: 108px;
    font-size: 15px;
}

.title {
    position: relative;
    margin-bottom: 20px; /* 调整与下方元素的间距 */
    left: 10px;
    top: 25px;
    width: 500px;
}

.title img {
    margin-left: 50px;
}

li:not(.title) {
    flex-basis: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-list li {
    margin-bottom: 5px;
}

.right-up {
    width: 500px;
    height: 410px;
    margin-left: 280px;
    margin-top: 80px;
}

.right-up img {
    position: relative;
    margin-left: 30px;
    top: 50px;
}

.right-up-chart {
    height: 40vh;
    margin-left: 30px;
}

.right-under {
    margin-top: 20px;
    padding: 10px;
    flex-basis: 59%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: 30px;
    position: relative;
    z-index: 50;
}

.text-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.text-container h2 {
    position: absolute;
    margin-top: -35px;
    left: 160px;
    color: #FFFFFF;
    font-size: 20px;
}

.text-container h3 {
    position: absolute;
    margin-top: 35px;
    left: 160px;
    color: #FFFFFF;
    font-size: 20px;
}

.text-container h4 {
    position: absolute;
    margin-top: 35px;
    left: 180px;
    color: #7498d4;
    font-size: 15px;
}

.text-container h5 {
    position: absolute;
    margin-top: -30px;
    left: 180px;
    color: #7498d4;
    font-size: 15px;
}

.text-container .number-sites {
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
}

.text-container .unit {
    margin-left: 20px; /* 控制"个"字与numberSites之间的间距 */
}

.site {
    position: absolute;
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
    margin-right: 20px; /* 可根据需要调整间距 */
    margin-left: -80px;
    margin-top: -35px;
    color: #5e82bb;
}

.equipment {
    position: absolute;
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
    margin-left: -80px;
    margin-top: 35px;
    color: #5e82bb;
}

.text-container1 {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.text-container1 h2 {
    position: absolute;
    margin-top: -35px;
    left: 485px;
    color: #FFFFFF;
    font-size: 20px;
}

.text-container1 h3 {
    position: absolute;
    margin-top: 35px;
    left: 485px;
    color: #FFFFFF;
    font-size: 20px;
}

.text-container1 h4 {
    position: absolute;
    margin-top: 35px;
    left: 500px;
    color: #7498d4;
    font-size: 15px;
}

.text-container1 h5 {
    position: absolute;
    margin-top: -35px;
    left: 500px;
    color: #7498d4;
    font-size: 15px;
}

.text-container1 .number-sites {
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
}

.text-container1 .unit {
    margin-left: 20px; /* 控制"个"字与numberSites之间的间距 */
}

.site1 {
    position: absolute;
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
    margin-right: 20px; /* 可根据需要调整间距 */
    margin-left: -200px;
    margin-top: -35px;
    color: #5e82bb;
}

.equipment1 {
    position: absolute;
    writing-mode: horizontal-tb;
    white-space: nowrap; /* 防止换行 */
    margin-left: -200px;
    margin-top: 35px;
    color: #5d85c4;
}

.containerleft {
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -20px;
    position: relative;
}

.containerleft::-webkit-scrollbar {
    display: none;
}

.event-list {
    width: 474px;
    height: 360px;
    position: absolute;
    top: 144px; /* 根据实际情况调整垂直位置 */
    left: 125px; /* 根据实际情况调整水平位置 */
    z-index: 1; /* 确保列表在图片上方显示 */
}

.event-item-div {
    overflow: scroll;
    max-height: 250px;
}

.event-item-div::-webkit-scrollbar {
    display: none;
}


.event-item {
    width: 420px;
    display: flex;
    margin-bottom: 25px;
    left: 100px;
}

.event-item-ul {
    color: #8ff5e7;
}

.event-item-li {
    color: #FFFFFF;
    padding: 3px;
}

.event-item li {
    flex: 1;
}

.title1 {
    margin-top: 10px;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.header {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
    padding: 10px 20px;
    margin-left: 30px;
    color: #8ff5e7;
}

.header li {
    flex-basis: 130px;
}

.event {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 10px;
    padding: 10px 20px;
    /*margin-left: 30px;*/
    margin: 10px 10px 10px 30px;
    color: #FFFFFF;
    position: relative;
}

.click-image {
    position: absolute;
    left: -14px;
    top: -13px;
}

.event-ul {
    position: absolute;
    top: 0px; /* 根据实际情况调整垂直位置 */
    left: 0px; /* 根据实际情况调整水平位置 */
    z-index: 1; /* 确保列表在图片上方显示 */
    width: 722px;
    margin-top: 120px;
}

.event li {
    flex-basis: 130px;
}

.eventlist-div {
    overflow: scroll;
    height: 205px;
}

.eventlist-div::-webkit-scrollbar {
    display: none;
}

.dotu {
    position: absolute;
    margin-left: 515px;
    margin-top: 130px;
    z-index: 2;
}

.xiuzhou {
    position: absolute;
    width: 235px;
    height: 353px;
    margin-left: 755px;
    margin-top: 214px;
    z-index: 3;
    opacity: 0;
}

.xiuzhou:hover {
    opacity: 1;
}

.jingkai {
    position: absolute;
    width: 166px;
    height: 220px;
    margin-left: 849px;
    margin-top: 334px;
    z-index: 4;
    opacity: 0;
}

.jingkai:hover {
    opacity: 1;
}

.jiashan {
    position: absolute;
    width: 256px;
    height: 244px;
    margin-left: 949px;
    margin-top: 159px;
    z-index: 3;
    opacity: 0;
}

.jiashan:hover {
    opacity: 1;
}

.nanhu {
    position: absolute;
    width: 291px;
    height: 213px;
    margin-left: 863px;
    margin-top: 334px;
    z-index: 3;
    opacity: 0;
}

.nanhu:hover {
    opacity: 1;
}

.pinghu {
    position: absolute;
    width: 281px;
    height: 251px;
    margin-left: 1137px;
    margin-top: 319px;
    z-index: 3;
    opacity: 0;
}

.pinghu:hover {
    opacity: 1;
}

.tongxiang {
    position: absolute;
    width: 324px;
    height: 295px;
    margin-left: 545px;
    margin-top: 375px;
    z-index: 3;
    opacity: 0;
}

.tongxiang:hover {
    opacity: 1;
}

.haining {
    position: absolute;
    width: 483px;
    height: 246px;
    margin-left: 550px;
    margin-top: 564px;
    z-index: 3;
    opacity: 0;
}

.haining:hover {
    opacity: 1;
}

.haiyan {
    position: absolute;
    width: 288px;
    height: 256px;
    margin-left: 932px;
    margin-top: 519px;
    z-index: 3;
    opacity: 0;
}

.haiyan:hover {
    opacity: 1;
}

.xiuzhou-p {
    position: absolute;
    left: 266px;
    top: 156px;
}

.xiuzhou-p-site {
    position: absolute;
    left: 257px;
    top: 179px;
    font-size: 15px;
}

.mapText {
    position: absolute;
    color: #FFFFFF;
    z-index: 4;
    width: 824px;
    height: 628px;
    top: 186px;
    left: 542px;
    pointer-events: none;
}

.jingkai-p {
    position: absolute;
    left: 345px;
    top: 290px;
}

.jingkai-p-site {
    position: absolute;
    left: 337px;
    top: 313px;
}

.jiashan-p {
    position: absolute;
    left: 525px;
    top: 59px;
}
.jiashan-p-site {
    position: absolute;
    left: 517px;
    top: 82px;
}

.nanhu-p {
    position: absolute;
    left: 453px;
    top: 230px;
}

.nanhu-p-site {
    position: absolute;
    left: 445px;
    top: 253px;
}

.pinghu-p {
    position: absolute;
    left: 681px;
    top: 230px;
}
.pinghu-p-site {
    position: absolute;
    left: 673px;
    top: 253px;
}

.tongxiang-p {
    position: absolute;
    left: 149px;
    top: 338px;
}
.tongxiang-p-site {
    position: absolute;
    left: 141px;
    top: 361px;
}

.haining-p {
    position: absolute;
    left: 268px;
    top: 466px;
}
.haining-p-site {
    position: absolute;
    left: 260px;
    top: 489px;
}

.haiyan-p {
    position: absolute;
    left: 488px;
    top: 415px;
}
.haiyan-p-site {
    position: absolute;
    left: 480px;
    top: 438px;
}

.orientation {
    position: absolute;
    left: 250px;
    top: 20px;
}

.orientation-div p {
    position: absolute;
    margin-left: 276px;
    margin-top: 24px;
    color: #999292;
    width: 50px;
}

.weather {
    position: absolute;
    left: 400px;
    top: 20px;
}

.weather-p {
    position: absolute;
    left: 174px;
    top: 2px;
    color: #d7d3d3;
    width: 50px;
}

.current-div {
    position: absolute;
}

.current-p {
    position: absolute;
    left: 1508px;
    top: 46px;
    color: #d7d3d3;
    width: 100px;
}

.current-p1 {
    position: absolute;
    left: 1308px;
    top: 40px;
    color: #d7d3d3;
    width: 100px;
    font-size: 20px;
}

.current-p2 {
    position: absolute;
    left: 1608px;
    top: 45px;
    color: #d7d3d3;
    width: 100px;
}
</style>